<template>
	<view>
		<dcp-scroller :isLoading="isLoading" @refresh="refresh">
		<view class="page_height_box">
		<view class="top_nav_box">
			<navigation-custom :config="config" @customConduct="customConduct" />
		</view>
		<view class="page_item_bj"></view>
		<view class="page_content_box">
			<view :style="{height:statusHeight+'px'}"></view>
			<view class="message_item_box" hover-class="hover_class" v-for="(data,index) in list" :key="index" @click="handleDetail(data.id)">
				<view class="message_item_icon">
					<view class="message_item_icon_dian" v-if="data.user_read_count==0"></view>
					<image src="../../static/images/icon56.png" mode=""></image>
				</view>
				<view class="message_item_info">
					<view class="message_item_left">customConduct
						<view class="message_item_title message_item_title1">{{data.title}}</view>
						<view class="message_item_time">{{data.created_at}}</view>
					</view>
				</view>
			</view>
			<view class="page_tip" v-if="list.length!=0">我是有底线的~</view>
			<view class="null_box" v-if="list.length==0" style="padding-top: 80rpx;" >
				<image src="../../static/images/png04.png" mode="" mode="widthFix"></image>
				<view class="null_tip">这里空空如也~</view>
			</view>
			<view  style="height:80rpx;"></view>
		</view>
		<view class="footer" v-if="no_read_num!=0">
			<view hover-class="hover_class" class="creatbutton" @click="handleAllRead()">全部已读<text>({{no_read_num}})</text></view>
		</view>
		</view>
		</dcp-scroller>

	</view>
</template>

<script>
	import navigationCustom from "@/components/struggler-navigationCustom/navigation-custom.vue"
	export default {
		components: {
			navigationCustom,
		},
		data() {
			return {
				isLoading:false,
				btn_status:true,
				no_read_num:0,
				count:0,
				list:[],
				page:1,
				info:null,
				statusHeight: 0,
				config: {
					title: "我的消息", //title
					bgcolor: "transparent", //背景颜色
					fontcolor: "#303133", //文字颜色，默认白色
					type: 4, //type 1，3胶囊 2，4无胶囊模式
					transparent: false, //是否背景透明 默认白色
					linear: false, //是为开启下滑渐变
					share: false, //是否将主页按钮显示为分享按钮
					menuIcon: "../../static/icon/back1.png", //当type为3或者4的时候左边的icon文件位置，注意位置与当前页面不一样
					// menuText:"返回", //当type为3或4的时候icon右边的文字
				},
			};
		},
		onLoad() {
			var a = this
			a.statusHeight = uni.getSystemInfoSync().statusBarHeight  + 30
		},
		onPageScroll(res) {
			var a = this
			if (0 < res.scrollTop <= 60) {
				a.config.bgcolor = 'rgba(255,255,255,0)'
			}
			if (40 < res.scrollTop <= 120) {
				a.opacity = 1
				a.config.bgcolor = 'rgba(255,255,255,0.2)'
			}
			if (60 < res.scrollTop <= 220) {
				a.config.bgcolor = 'rgba(255,255,255,0.4 )'
			}
			if (res.scrollTop > 220) {
				a.config.bgcolor = 'rgba(255,255,255,1)'
			}
			if (res.scrollTop < 50) {
				a.opacity = 0
			}
			if (res.scrollTop == 0) {
				a.opacity = 0
				a.config.bgcolor = 'rgba(255,255,255,0)'
			}
		},
		onShow(){
			var a = this
			a.list = []
			a.page = 1
			a.getList()
			a.getNum()
		},
		onPullDownRefresh(){
			var a = this
			a.list = []
			a.page = 1
			a.getList()
			a.getNum()
		},
		onReachBottom(){
			var a = this
			console.log('触底了')
			if(a.count >a.list.length){
				console.log(a.list.length)
				a.page++;
				a.getList()
			}
		},
		methods:{
			refresh(){
				var a = this
				a.isLoading = true;
				setTimeout(()=>{
					a.list = []
					a.page = 1
					a.getList()
					a.getNum()
				},200)
			},
			handleAllRead(){
				var a =this
				if(a.btn_status){
					a.btn_status = false
					uni.showLoading({
						title:'加载中'
					})
					a.globalajax('common/read',{
						},'GET',function(res) {
							console.log(res);
							uni.hideLoading()
							uni.stopPullDownRefresh()
							setTimeout(()=>{
								a.btn_status = true
							},1500)
							if(res.data.code==200){
								uni.showToast({
									title:'操作成功',
									icon:'none'
								})
								setTimeout(()=>{
									a.list = []
									a.page = 1
									a.getList()
									a.getNum()
								},500)
							}else{
								a.$showModal({
									title:'友情提示',
									content:res.data.msg,
									showCancel:false,
									confirmText:'我知道了',
									success: (res) => {
									}
								});
							}
						}
					);
				}
			},
			getNum(){
				var a =this
				a.globalajax('common/unRead',{
					},'GET',function(res) {
						console.log(res);
						uni.hideLoading()
						uni.stopPullDownRefresh()
						if(res.data.code==200){
							a.no_read_num = res.data.data
						}else{
							a.$showModal({
								title:'友情提示',
								content:res.data.msg,
								showCancel:false,
								confirmText:'我知道了',
								success: (res) => {
								}
							});
						}
					}
				);
			},
			getList(){
				var a =this
				uni.showLoading({
					title:'加载中'
				})
				a.globalajax('common/notice_list',{
						page:a.page,
						per_page:10,
					},'GET',function(res) {
						console.log(res);
						uni.hideLoading()
						uni.stopPullDownRefresh()
						a.isLoading = false
						if(res.data.code==200){
							a.list = a.list.concat(res.data.data.data)
							a.count = res.data.data.total
						}else{
							a.$showModal({
								title:'友情提示',
								content:res.data.msg,
								showCancel:false,
								confirmText:'我知道了',
								success: (res) => {
								}
							});
						}
					}
				);
			},
			handleDetail(id){
				uni.navigateTo({
					url:'/pages/user/noticeArticle?id=' + id
				})
			},
			customConduct() {
				uni.navigateBack({
					delta: 1
				})
			},
		}
	}
</script>

<style lang="scss">
	.page_height_box{
		min-height: 100vh;
	}
	page {
			background-color: #fff;
		}
		.footer {
			width: 100%;
			padding-bottom:0rpx;
			padding-bottom: calc(0rpx + constant(safe-area-inset-bottom));
			padding-bottom: calc(0rpx + env(safe-area-inset-bottom));
			background-color: #fff;
			position: fixed;
			bottom: 0;
			z-index: 999;
			display: flex;
			align-items: center;
			border-top: 2rpx solid #EBEEF5;
			.creatbutton {
				text-align: center;
				line-height: 80rpx;
				margin: 0 auto;
				width: 702rpx;
				height: 80rpx;
				flex-shrink: 0;
				border-radius: 16rpx;
				background: #fff;
				color: rgba(255, 107, 0, 1);
				font-size: 30rpx;
				font-weight: bold;
			}
		}
		.top_nav_box {
			position: absolute;
			top: 0;
			left: 0;
			z-index: 10;
		}
		.page_item_bj {
			width: 750rpx;
			height: 664rpx;
			background-image: url('../../static/images/png03.png');
			background-size: 100% 100%;
			background-repeat: no-repeat;
			position: absolute;
			top: 0;
			left: 0;
			z-index: 0;
		}
		.page_content_box {
			width: 750rpx;
			position: absolute;
			top: 0;
			left: 0;
			z-index: 1;
			.message_item_box{
				display: flex;
				align-items: center;
				.message_item_info{
					width: 622rpx;
					height: 154rpx;
					display: flex;
					align-items: center;
					justify-content: space-between;
					border-bottom: 2rpx solid rgba(0, 0, 0, 0.05);
					.message_item_left{
						.message_item_title{
							color: rgba(48, 49, 51, 1);
							font-size: 30rpx;
							width: 560rpx;
						}
						.message_item_title1{
							text-overflow: -o-ellipsis-lastline;
							  overflow: hidden;
							  text-overflow: ellipsis;
							  display: -webkit-box;
							  -webkit-line-clamp: 1;
							  line-clamp: 1;
							  -webkit-box-orient: vertical;
						}
						.message_item_time{
							color: #909399;
							font-size: 24rpx;
							padding-top: 6rpx;
						}
					}
					.message_item_right{
						color: #08CC93;
						font-size: 28rpx;
						display: flex;
						align-items: center;
						image{
							width: 40rpx;
							margin-right: 16rpx;
							margin-left: 6rpx;
							height: 40rpx;
						}
					}
				}
				.message_item_icon{
					width: 128rpx;
					height: 128rpx;
					position: relative;
					display: flex;
					align-items: center;
					justify-content: center;
					.message_item_icon_dian{
						position: absolute;
						top: 20rpx;
						left: 90rpx;
						width: 18rpx;
						height: 18rpx;
						background: #FF4D4F;
						border-radius: 50%;
						z-index: 1;
					}
					image{
						width: 40rpx;
						height: 40rpx;
					}
				}
			}
		}


</style>
